<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=0">

  <!-- Always force latest IE rendering engine or request Chrome Frame -->
  <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">

  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,800">

  <!-- Use title if it's in the page YAML frontmatter -->
  <title>Core Admin Theme</title>

  <link href="../../stylesheets/application.css" media="screen" rel="stylesheet" type="text/css" />

  <!--[if lt IE 9]>
  <script src="../../javascripts/vendor/html5shiv.js" type="text/javascript"></script>
  <script src="../../javascripts/vendor/excanvas.js" type="text/javascript"></script>
  <![endif]-->

  <script src="../../javascripts/application.js" type="text/javascript"></script>
</head>



<body>
<div class="navbar navbar-top navbar-inverse">
  <div class="navbar-inner">
    <div class="container-fluid">

      <a class="brand" href="#">Core Admin</a>

      <!-- the new toggle buttons -->

      <ul class="nav pull-right">

        <li class="toggle-primary-sidebar hidden-desktop" data-toggle="collapse" data-target=".nav-collapse-primary"><button type="button" class="btn btn-navbar"><i class="icon-th-list"></i></button></li>

        <li class="hidden-desktop" data-toggle="collapse" data-target=".nav-collapse-top"><button type="button" class="btn btn-navbar"><i class="icon-align-justify"></i></button></li>

      </ul>

      
          

          <div class="nav-collapse nav-collapse-top collapse">

            <ul class="nav full pull-right">
              <li class="dropdown user-avatar">

                <!-- the dropdown has a custom user-avatar class, this is the small avatar with the badge -->

                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <span>
                    <img class="menu-avatar" src="../../images/avatars/avatar1.jpg" /> <span>John Smith <i class="icon-caret-down"></i></span>
                    <span class="badge badge-dark-red">5</span>
                  </span>
                </a>

                <ul class="dropdown-menu">

                  <!-- the first element is the one with the big avatar, add a with-image class to it -->

                  <li class="with-image">
                    <div class="avatar">
                      <img src="../../images/avatars/avatar1.jpg" />
                    </div>
                    <span>John Smith</span>
                  </li>

                  <li class="divider"></li>

                  <li><a href="#"><i class="icon-user"></i> <span>Profile</span></a></li>
                  <li><a href="#"><i class="icon-cog"></i> <span>Settings</span></a></li>
                  <li><a href="#"><i class="icon-envelope"></i> <span>Messages</span> <span class="label label-dark-red pull-right">5</span></a></li>
                  <li><a href="#"><i class="icon-off"></i> <span>Logout</span></a></li>
                </ul>
              </li>
            </ul>

            <form class="navbar-search pull-right">
              <input type="text" class="search-query animated" placeholder="Search">
              <i class="icon-search"></i>
            </form>

            <ul class="nav pull-right">
              <li class="active"><a href="#" title="Go home"><i class="icon-home"></i> Home</a></li>
              <li><a href="#" title="Manage users"><i class="icon-user"></i> Users</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Some link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>


            </ul>

          </div>
      

    </div>
  </div>
</div>
<div class="sidebar-background">
  <div class="primary-sidebar-background"></div>
</div>

<div class="primary-sidebar">

  <!-- Main nav -->
  <ul class="hide-dropdown-sidebar nav nav-collapse collapse nav-collapse-primary">
    
    

        <li class="">
          <span class="glow"></span>
          <a href="../dashboard/dashboard.html">
              <i class="icon-dashboard icon-2x"></i>
              <span>Dashboard</span>
          </a>
        </li>

    


    

        <li class="dark-nav active">

          <span class="glow"></span>

          

          <a class="accordion-toggle  " data-toggle="collapse" href="#VAZDQUWczm">
              <i class="icon-beaker icon-2x"></i>
                    <span>
                      UI Lab
                      <i class="icon-caret-down"></i>
                    </span>

          </a>

          <ul id="VAZDQUWczm" class="collapse in">
            
                <li class="active">
                  <a href="buttons.html">
                      <i class="icon-hand-up"></i> Buttons
                  </a>
                </li>
            
                <li class="">
                  <a href="general.html">
                      <i class="icon-beaker"></i> General elements
                  </a>
                </li>
            
                <li class="">
                  <a href="icons.html">
                      <i class="icon-info-sign"></i> Icons
                  </a>
                </li>
            
                <li class="">
                  <a href="grid.html">
                      <i class="icon-th-large"></i> Grid
                  </a>
                </li>
            
                <li class="">
                  <a href="tables.html">
                      <i class="icon-table"></i> Tables
                  </a>
                </li>
            
                <li class="">
                  <a href="widgets.html">
                      <i class="icon-plus-sign-alt"></i> Widgets
                  </a>
                </li>
            
          </ul>

        </li>

    


    

        <li class="">
          <span class="glow"></span>
          <a href="../forms/forms.html">
              <i class="icon-edit icon-2x"></i>
              <span>Forms</span>
          </a>
        </li>

    


    

        <li class="">
          <span class="glow"></span>
          <a href="../charts/charts.html">
              <i class="icon-bar-chart icon-2x"></i>
              <span>Charts</span>
          </a>
        </li>

    


    

        <li class="dark-nav ">

          <span class="glow"></span>

          

          <a class="accordion-toggle collapsed " data-toggle="collapse" href="#akr5v7GRF8">
              <i class="icon-link icon-2x"></i>
                    <span>
                      Others
                      <i class="icon-caret-down"></i>
                    </span>

          </a>

          <ul id="akr5v7GRF8" class="collapse ">
            
                <li class="">
                  <a href="../other/wizard.html">
                      <i class="icon-magic"></i> Wizard
                  </a>
                </li>
            
                <li class="">
                  <a href="../other/login.html">
                      <i class="icon-user"></i> Login Page
                  </a>
                </li>
            
                <li class="">
                  <a href="../other/sign_up.html">
                      <i class="icon-user"></i> Sign Up Page
                  </a>
                </li>
            
                <li class="">
                  <a href="../other/full_calendar.html">
                      <i class="icon-calendar"></i> Full Calendar
                  </a>
                </li>
            
                <li class="">
                  <a href="../other/error404.html">
                      <i class="icon-ban-circle"></i> Error 404 page
                  </a>
                </li>
            
          </ul>

        </li>

    


  </ul>

  <!-- Small main nav -->
  <ul class="hide-collapse-sidebar nav nav-collapse collapse nav-collapse-primary">
    
    

        <li class="">
          <span class="glow"></span>
          <a href="../dashboard/dashboard.html">
              <i class="icon-dashboard icon-2x"></i>
              <span>Dashboard</span>
          </a>
        </li>

    


    

        <li class="dark-nav to-right active">

          <span class="glow"></span>
          <a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html">
              <i class="icon-beaker icon-2x"></i>
                    <span>
                      UI Lab
                      <i class="icon-caret-right"></i>
                    </span>

          </a>

          <ul class="dropdown-menu">
            
                <li class="active">
                  <a href="buttons.html">
                      <i class="icon-hand-up"></i> Buttons
                  </a>
                </li>
            
                <li class="">
                  <a href="general.html">
                      <i class="icon-beaker"></i> General elements
                  </a>
                </li>
            
                <li class="">
                  <a href="icons.html">
                      <i class="icon-info-sign"></i> Icons
                  </a>
                </li>
            
                <li class="">
                  <a href="grid.html">
                      <i class="icon-th-large"></i> Grid
                  </a>
                </li>
            
                <li class="">
                  <a href="tables.html">
                      <i class="icon-table"></i> Tables
                  </a>
                </li>
            
                <li class="">
                  <a href="widgets.html">
                      <i class="icon-plus-sign-alt"></i> Widgets
                  </a>
                </li>
            
          </ul>

        </li>

    


    

        <li class="">
          <span class="glow"></span>
          <a href="../forms/forms.html">
              <i class="icon-edit icon-2x"></i>
              <span>Forms</span>
          </a>
        </li>

    


    

        <li class="">
          <span class="glow"></span>
          <a href="../charts/charts.html">
              <i class="icon-bar-chart icon-2x"></i>
              <span>Charts</span>
          </a>
        </li>

    


    

        <li class="dark-nav to-right ">

          <span class="glow"></span>
          <a class="dropdown-toggle" data-toggle="dropdown" href="../other/wizard.html">
              <i class="icon-link icon-2x"></i>
                    <span>
                      Others
                      <i class="icon-caret-right"></i>
                    </span>

          </a>

          <ul class="dropdown-menu">
            
                <li class="">
                  <a href="../other/wizard.html">
                      <i class="icon-magic"></i> Wizard
                  </a>
                </li>
            
                <li class="">
                  <a href="../other/login.html">
                      <i class="icon-user"></i> Login Page
                  </a>
                </li>
            
                <li class="">
                  <a href="../other/sign_up.html">
                      <i class="icon-user"></i> Sign Up Page
                  </a>
                </li>
            
                <li class="">
                  <a href="../other/full_calendar.html">
                      <i class="icon-calendar"></i> Full Calendar
                  </a>
                </li>
            
                <li class="">
                  <a href="../other/error404.html">
                      <i class="icon-ban-circle"></i> Error 404 page
                  </a>
                </li>
            
          </ul>

        </li>

    


  </ul>

  <div class="hide-dropdown-sidebar hidden-tablet hidden-phone">
    <div class="text-center" style="margin-top: 60px">
      <div class="easy-pie-chart-percent" style="display: inline-block" data-percent="89"><span>89%</span></div>
      <div style="padding-top: 20px"><b>CPU Usage</b></div>
    </div>

    <hr class="divider" style="margin-top: 60px">

    <div class="sparkline-box side">

      <div class="sparkline-row">
        <h4 class="gray"><span>Orders</span> 847</h4>
        <div class="sparkline big" data-color="gray"><!--4,12,3,11,28,4,21,4,19,14,24,20--></div>
      </div>

      <hr class="divider">
      <div class="sparkline-row">
        <h4 class="dark-green"><span>Income</span> $43.330</h4>
        <div class="sparkline big" data-color="darkGreen"><!--24,22,11,4,18,8,8,20,23,29,4,19--></div>
      </div>

      <hr class="divider">
      <div class="sparkline-row">
        <h4 class="blue"><span>Reviews</span> 223</h4>
        <div class="sparkline big" data-color="blue"><!--14,26,4,17,29,27,27,17,14,24,4,23--></div>
      </div>

      <hr class="divider">
    </div>
  </div>


</div>
<div class="main-content">
  <div class="container-fluid">
    <div class="row-fluid">

      <div class="area-top clearfix">
        <div class="pull-left header">
          <h3 class="title">
            <i class="icon-hand-up"></i>
            Buttons
          </h3>
          <h5>
            <span class="hidden-tablet hidden-phone">
              Click <a href="#" id="switch-sidebar">here</a> for a different sidebar
            </span>
            <span class="hidden-desktop">
              A subtitle can go here
            </span>
          </h5>
        </div>

        <ul class="inline pull-right sparkline-box">

          <li class="sparkline-row">
            <h4 class="blue"><span>Orders</span> 847</h4>
            <div class="sparkline big" data-color="blue"><!--24,27,18,29,29,19,23,22,6,10,5,19--></div>
          </li>

          <li class="sparkline-row">
            <h4 class="green"><span>Reviews</span> 223</h4>
            <div class="sparkline big" data-color="green"><!--4,5,22,17,24,12,18,4,5,10,14,8--></div>
          </li>

          <li class="sparkline-row">
            <h4 class="red"><span>New visits</span> 7930</h4>
            <div class="sparkline big"><!--10,17,11,10,5,21,17,10,26,18,18,29--></div>
          </li>

        </ul>
      </div>
    </div>
  </div>

  <div class="container-fluid padded">
    <div class="row-fluid">

      <!-- Breadcrumb line -->

      <div id="breadcrumbs">
        <div class="breadcrumb-button blue">
          <span class="breadcrumb-label"><i class="icon-home"></i> Home</span>
          <span class="breadcrumb-arrow"><span></span></span>
        </div>

        
            <div class="breadcrumb-button">
              <span class="breadcrumb-label">
                <i class="icon-beaker"></i> UI Lab
              </span>
              <span class="breadcrumb-arrow"><span></span></span>
            </div>
        

        <div class="breadcrumb-button">
          <span class="breadcrumb-label">
            <i class="icon-hand-up"></i> Buttons
          </span>
          <span class="breadcrumb-arrow"><span></span></span>
        </div>
      </div>
    </div>
  </div>

  <div class="container-fluid padded">
    <!-- find me in partials/action_nav_normal_one_row -->

<!--big normal buttons-->
<div class="action-nav-normal">

  <div class="row-fluid">
    <div class="span2 action-nav-button">
      <a href="#" title="New Project">
        <i class="icon-file-alt"></i>
        <span>New Project</span>
      </a>
      <span class="triangle-button red"><i class="icon-plus"></i></span>
    </div>

    <div class="span2 action-nav-button">
      <a href="#" title="Messages">
        <i class="icon-comments-alt"></i>
        <span>Messages</span>
      </a>
      <span class="label label-black">14</span>
    </div>

    <div class="span2 action-nav-button">
      <a href="#" title="Files">
        <i class="icon-folder-open-alt"></i>
        <span>Files</span>
      </a>
    </div>

    <div class="span2 action-nav-button">
      <a href="#" title="Users">
        <i class="icon-user"></i>
        <span>Users</span>
      </a>
    </div>

    <div class="span2 action-nav-button">
      <a href="#" title="Friends">
        <i class="icon-facebook-sign"></i>
        <span>Friends</span>
      </a>
    </div>

    <div class="span2 action-nav-button">
      <a href="#" title="Followers">
        <i class="icon-twitter"></i>
        <span>Followers</span>
      </a>
    </div>
  </div>

</div>
<hr class="divider">

<!-- find me in partials/action_nav_normal_rounded -->

<!-- big normal buttons rounded -->

<ul class="action-nav-normal rounded">

  <li class="action-nav-button">
    <a href="#" class="tip" title="New Project">
      <i class="icon-file-alt"></i>
    </a>
  </li>

  <li class="action-nav-button">
    <a href="#" class="tip" title="Messages">
      <i class="icon-comments-alt"></i>
    </a>
    <span class="label label-black">14</span>
  </li>

  <li class="action-nav-button">
    <a href="#" class="tip" title="Files">
      <i class="icon-folder-open-alt"></i>
    </a>
  </li>

  <li class="action-nav-button">
    <a href="#" class="tip" title="Users">
      <i class="icon-user"></i>
    </a>
  </li>

  <li class="action-nav-button">
    <a href="#" class="tip" title="Friends">
      <i class="icon-facebook-sign"></i>
    </a>
  </li>

  <li class="action-nav-button">
    <a href="#" class="tip" title="Followers">
      <i class="icon-twitter"></i>
    </a>
  </li>

</ul>

<hr class="divider">

<div class="row-fluid">
  <div class="span6">
    <div class="box">
      <div class="box-header">
        <span class="title">Button styles</span>
        <ul class="box-toolbar">
          <li><span class="label label-red">22</span></li>
        </ul>
      </div>

      <div class="box-content padded">

        <div class="page-header">
          <h4>Normal buttons</h4>
        </div>

        
            <p>
              
                  <button class="btn btn-default">button</button>
              
                  <button class="btn btn-red">button</button>
              
                  <button class="btn btn-blue">button</button>
              
                  <button class="btn btn-green">button</button>
              
            </p>
        
            <p>
              
                  <button class="btn btn-gray">button</button>
              
                  <button class="btn btn-black">button</button>
              
                  <button class="btn btn-lightblue">button</button>
              
                  <button class="btn btn-gold">button</button>
              
            </p>
        
            <p>
              
                  <button class="btn btn-sea">button</button>
              
                  <button class="btn btn-brown">button</button>
              
            </p>
        

        
            <div class="page-header">
              <h4>Large buttons</h4>
            </div>
            
                <button class="btn btn-large btn-default">button</button>
            
                <button class="btn btn-large btn-red">button</button>
            
                <button class="btn btn-large btn-blue">button</button>
            
                <button class="btn btn-large btn-green">button</button>
            
        
            <div class="page-header">
              <h4>Small buttons</h4>
            </div>
            
                <button class="btn btn-small btn-default">button</button>
            
                <button class="btn btn-small btn-red">button</button>
            
                <button class="btn btn-small btn-blue">button</button>
            
                <button class="btn btn-small btn-green">button</button>
            
        
            <div class="page-header">
              <h4>Mini buttons</h4>
            </div>
            
                <button class="btn btn-mini btn-default">button</button>
            
                <button class="btn btn-mini btn-red">button</button>
            
                <button class="btn btn-mini btn-blue">button</button>
            
                <button class="btn btn-mini btn-green">button</button>
            
        
      </div>
    </div>
  </div>

  <div class="span6">
    <div class="box">
      <div class="box-header">
        <span class="title">Dropdowns</span>
        <ul class="box-toolbar">
          <li><span class="label label-green">68</span></li>
        </ul>
      </div>
      <div class="box-content padded">

        

            <div class="page-header">
              <h4>Normal dropdowns</h4>
            </div>

            
                <p>
                  
                    <div class="btn-group">
                      <button class="btn btn-default  dropdown-toggle" data-toggle="dropdown">dropdown <span class="caret"></span></button>
                      <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                      </ul>
                    </div>
                  
                    <div class="btn-group">
                      <button class="btn btn-red  dropdown-toggle" data-toggle="dropdown">dropdown <span class="caret"></span></button>
                      <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                      </ul>
                    </div>
                  
                </p>
            
                <p>
                  
                    <div class="btn-group">
                      <button class="btn btn-blue  dropdown-toggle" data-toggle="dropdown">dropdown <span class="caret"></span></button>
                      <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                      </ul>
                    </div>
                  
                    <div class="btn-group">
                      <button class="btn btn-green  dropdown-toggle" data-toggle="dropdown">dropdown <span class="caret"></span></button>
                      <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                      </ul>
                    </div>
                  
                </p>
            

        

            <div class="page-header">
              <h4>Large dropdowns</h4>
            </div>

            
                <p>
                  
                    <div class="btn-group">
                      <button class="btn btn-default btn-large dropdown-toggle" data-toggle="dropdown">dropdown <span class="caret"></span></button>
                      <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                      </ul>
                    </div>
                  
                    <div class="btn-group">
                      <button class="btn btn-red btn-large dropdown-toggle" data-toggle="dropdown">dropdown <span class="caret"></span></button>
                      <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                      </ul>
                    </div>
                  
                </p>
            
                <p>
                  
                    <div class="btn-group">
                      <button class="btn btn-blue btn-large dropdown-toggle" data-toggle="dropdown">dropdown <span class="caret"></span></button>
                      <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                      </ul>
                    </div>
                  
                    <div class="btn-group">
                      <button class="btn btn-green btn-large dropdown-toggle" data-toggle="dropdown">dropdown <span class="caret"></span></button>
                      <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                      </ul>
                    </div>
                  
                </p>
            

        

            <div class="page-header">
              <h4>Small dropdowns</h4>
            </div>

            
                <p>
                  
                    <div class="btn-group">
                      <button class="btn btn-default btn-small dropdown-toggle" data-toggle="dropdown">dropdown <span class="caret"></span></button>
                      <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                      </ul>
                    </div>
                  
                    <div class="btn-group">
                      <button class="btn btn-red btn-small dropdown-toggle" data-toggle="dropdown">dropdown <span class="caret"></span></button>
                      <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                      </ul>
                    </div>
                  
                </p>
            
                <p>
                  
                    <div class="btn-group">
                      <button class="btn btn-blue btn-small dropdown-toggle" data-toggle="dropdown">dropdown <span class="caret"></span></button>
                      <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                      </ul>
                    </div>
                  
                    <div class="btn-group">
                      <button class="btn btn-green btn-small dropdown-toggle" data-toggle="dropdown">dropdown <span class="caret"></span></button>
                      <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                      </ul>
                    </div>
                  
                </p>
            

        

            <div class="page-header">
              <h4>Mini dropdowns</h4>
            </div>

            
                <p>
                  
                    <div class="btn-group">
                      <button class="btn btn-default btn-mini dropdown-toggle" data-toggle="dropdown">dropdown <span class="caret"></span></button>
                      <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                      </ul>
                    </div>
                  
                    <div class="btn-group">
                      <button class="btn btn-red btn-mini dropdown-toggle" data-toggle="dropdown">dropdown <span class="caret"></span></button>
                      <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                      </ul>
                    </div>
                  
                </p>
            
                <p>
                  
                    <div class="btn-group">
                      <button class="btn btn-blue btn-mini dropdown-toggle" data-toggle="dropdown">dropdown <span class="caret"></span></button>
                      <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                      </ul>
                    </div>
                  
                    <div class="btn-group">
                      <button class="btn btn-green btn-mini dropdown-toggle" data-toggle="dropdown">dropdown <span class="caret"></span></button>
                      <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                      </ul>
                    </div>
                  
                </p>
            

        
      </div>
    </div>
  </div>
</div>

<div class="row-fluid">
  <div class="span6">
    <div class="box">
      <div class="box-header">
        <span class="title">Split dropdowns</span>
        <ul class="box-toolbar">
          <li>
            <input class="iButton-icons" type="checkbox" checked="checked" />
          </li>
        </ul>
      </div>
      <div class="box-content padded">

        

            <div class="btn-group">
              <button class="btn btn-default">Actions</button>
              <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>

        

            <div class="btn-group">
              <button class="btn btn-red">Actions</button>
              <button class="btn btn-red dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>

        

            <div class="btn-group">
              <button class="btn btn-blue">Actions</button>
              <button class="btn btn-blue dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>

        

            <div class="btn-group">
              <button class="btn btn-green">Actions</button>
              <button class="btn btn-green dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </div>

        

      </div>
    </div>
  </div>

  <div class="span6">
    <div class="box">
      <div class="box-header">
        <span class="title">Toolbars</span>
        <ul class="box-toolbar">
          <li>
            <form class="fill-up" style="width: 100px">
              <label class="input-with-submit">
                <input type="text" placeholder="Search..."/>
                <button type="submit" class="submit-icon">
                  <i class="icon-search"></i>
                </button>
              </label>
            </form>
          </li>
        </ul>
      </div>

      <div class="box-content padded">
        <div class="btn-toolbar" style="margin: 0;">
          <div class="btn-group">
            <button class="btn btn-default"><i class="icon-file"></i></button>
            <button class="btn btn-default"><i class="icon-folder-open-alt"></i></button>
            <button class="btn btn-default"><i class="icon-save"></i></button>
          </div>
          <div class="btn-group">
            <button class="btn btn-default"><i class="icon-cut"></i></button>
            <button class="btn btn-default"><i class="icon-copy"></i></button>
            <button class="btn btn-default"><i class="icon-paste"></i></button>
          </div>
          <div class="btn-group">
            <button class="btn btn-default"><i class="icon-download-alt"></i></button>
            <button class="btn btn-default"><i class="icon-search"></i></button>
            <button class="btn btn-default"><i class="icon-lock"></i></button>
            <button class="btn btn-default"><i class="icon-comment-alt"></i></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row-fluid">
  <div class="span6">
    <div class="box">
      <div class="box-header">
        <span class="title">Icon Buttons</span>
        <ul class="box-toolbar">
          <li>
            <form class="fill-up" style="width: 100px">
              <label class="input-with-submit">
                <input type="text" placeholder="Insert coin..."/>
                <button type="submit" class="submit-icon">
                  <i class="icon-angle-right"></i>
                </button>
              </label>
            </form>
          </li>
        </ul>
      </div>

      <div class="box-content padded">
        <button class="btn btn-blue"><i class="icon-home"></i> Home</button>
        <button class="btn btn-default"><i class="icon-cog"></i> Options</button>
        <button class="btn btn-default"><i class="icon-bar-chart"></i> Charts</button>

        <div class="btn-group">
          <button class="btn btn-default"><i class="icon-wrench"></i> Actions</button>
          <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div>

        <div class="btn-group">
          <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="icon-pencil"></i> Edit <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#"><i class="icon-cut"></i> Cut</a></li>
            <li><a href="#"><i class="icon-copy"></i> Copy</a></li>
            <li><a href="#"><i class="icon-paste"></i> Paste</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="span6">
    <div class="box">
      <div class="box-header relative">
        <span class="title">Triangle buttons</span>
        <span class="triangle-button blue"><i class="icon-question-sign"></i></span>
      </div>

      <div class="box-content padded relative">
        <p>Any icons you see in this theme are FontAwesome. Abuse them :)</p>

        <div class="row-fluid">
          
          
          <div class="span3">
            <div class="well relative">
              <span class="triangle-button red"><i class="icon-plus"></i></span>
              some content
            </div>
          </div>
          
          <div class="span3">
            <div class="well relative">
              <span class="triangle-button green"><i class="icon-bell"></i></span>
              some content
            </div>
          </div>
          
          <div class="span3">
            <div class="well relative">
              <span class="triangle-button blue"><i class="icon-ok"></i></span>
              some content
            </div>
          </div>
          
          <div class="span3">
            <div class="well relative">
              <span class="triangle-button orange"><i class="icon-pencil"></i></span>
              some content
            </div>
          </div>
          
        </div>

        <p>You can add triangle buttons to any container. Here I'm using bootstrap's wells</p>
      </div>
    </div>
  </div>
</div>

<div style="height: 150px;"></div>
  </div>
</div>

</body>
</html>
